<template>
  <div class="sidebar-container">
    <nav class="sidebar">
      <ul>
        <li v-for="(page, index) in pages" :key="index" @click="selectPage(index)">
          <a :class="{ active: currentPage === index }">{{ page.title }}</a>
        </li>
      </ul>
    </nav>
    <main class="content">
      <component :is="currentPageComponent"></component>
    </main>
  </div>
</template>

<script>
import Page1 from './views/Page1.vue';
import Page2 from './views/Page2.vue';

export default {
  data() {
    return {
      pages: [
        { title: '周末秒杀', component: 'Page1' },
        { title: '周五秒杀', component: 'Page2' },
      ],
      currentPage: 0
    };
  },
  computed: {
    currentPageComponent() {
      return this.pages[this.currentPage].component;
    }
  },
  methods: {
    selectPage(index) {
      this.currentPage = index;
    }
  },
  components: {
    Page1,
    Page2,
  }
};
</script>

<style scoped>.sidebar-container {
  display: flex;
  height: 100vh;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}
.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  border-right: 1px solid #ddd;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.sidebar a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 10px;
}

.sidebar a.active {
  background-color: #ddd;
  font-weight: bold;
}

.content {
  flex-grow: 1;
  padding: 20px;
}
</style>